<template>
  <view>
    <u-cell-group :border="false">
      <u-cell title="头像" isLink @click="changeUserPhoto">
        <template #value>
          <image class="img" :src="useInfo.headUrl" shape="circle"></image>
        </template>
      </u-cell>
      <u-cell :border="false" title="昵称" isLink @click="goPage('/pages/myPage/editPage/name')">
        <template #value>
          <text style="color: #bebebe">{{ useInfo.nickName }}</text>
        </template>
      </u-cell>
    </u-cell-group>
    <u-cell-group :border="false">
      <u-cell :border="false" title="支付宝信息" isLink @click="goPage('/pages/myPage/editPage/zhifubaoPage')"></u-cell>
    </u-cell-group>
    <u-cell-group :border="false">
      <!-- <u-cell title="账号" :value="useInfo.userId"></u-cell> -->
      <u-cell title="手机号" :value="useInfo.cell" isLink @click="goPage('/pages/myPage/editPage/editPhone')"></u-cell>
      <u-cell title="登录密码" isLink @click="goPage('/pages/myPage/editPage/password')"></u-cell>
      <u-cell title="支付密码" isLink @click="goPage('/pages/myPage/editPage/payPassword')"></u-cell>
      <!-- <u-cell :border="false" title="意见反馈" isLink @click="goPage('/pages/myPage/editPage/feedback')"></u-cell> -->
    </u-cell-group>
    <u-cell-group :border="false">
      <u-cell :border="false" title="退出登录" titleStyle="color: #F35555;" @click="quitLogin"></u-cell>
    </u-cell-group>
  </view>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";
import { BASE_UPLOADURL } from "../../utils/request";
import { goPage } from "../../utils/commonFn";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { selectUserInfoByUserId } from "../../api/my";
const useInfo = ref<myTypes.myInfo>({
  headUrl: "",
  nickName: "123",
  cache: "0M",
  cell: "",
  userId: "",
});
onShow(async () => {
  const res = await selectUserInfoByUserId({ userId: uni.getStorageSync("userId") });
  useInfo.value = res;
});

const changeUserPhoto = () => {
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res: any) {
      if (res.tempFiles[0].size > 2 * 1024 * 1024) {
        uni.showToast({
          title: "图片大小不得超过2MB",
          icon: "none",
        });
      } else {
        uni.showLoading({
          title: "加载中",
        });
        uni.uploadFile({
          url: BASE_UPLOADURL,
          filePath: res.tempFilePaths[0],
          name: "userImage",
          formData: {
            userId: uni.getStorageSync("userId"),
          },
          success: async (uploadFileRes) => {
            console.log(uploadFileRes);
            // await uplo({ url: JSON.parse(uploadFileRes.data).imgUrl });
            useInfo.value.headUrl = JSON.parse(uploadFileRes.data).imgUrl;
            uni.showToast({
              title: "修改成功",
            });
          },
          complete() {
            //隐藏loading
            uni.hideLoading();
          },
        });
      }
    },
  });
};
const quitLogin = () => {
  uni.clearStorage();
  uni.switchTab({
    url: "/pages/home/home",
  });
};
</script>

<style lang="less" scoped>
/deep/.u-cell-group {
  margin-top: 20rpx;
  overflow: hidden;
  background-color: #fff;
}

/deep/ .u-cell-group__wrapper {
  padding: 0rpx 32rpx;
}

/deep/ .u-cell__body {
  padding: 36rpx 0rpx;
}

/deep/ .u-cell__title-text {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1e1e1e;
  line-height: 42rpx;
}

/deep/ .u-cell__value {
  font-size: 28rpx;
  font-weight: 400;
  color: #bebebe;
}
.img {
  width: 76rpx;
  height: 76rpx;
  background: #ebeff8;
  border-radius: 50%;
}
</style>
